import React, { useState } from 'react';
import { Card, Tabs, Form, Input, Button, Avatar, Upload, message, Descriptions, Tag, Space, Typography, Divider } from 'antd';
import { UserOutlined, MailOutlined, LockOutlined, UploadOutlined, SaveOutlined } from '@ant-design/icons';
import { useAuthStore } from '../../stores/authStore';

const { Title, Paragraph } = Typography;

const UserProfile: React.FC = () => {
  const { user } = useAuthStore();
  const [activeTab, setActiveTab] = useState<string>('profile');
  const [form] = Form.useForm();
  
  const handleSaveProfile = (values: any) => {
    console.log('保存个人资料:', values);
    message.success('个人资料已更新');
  };
  
  const handleChangePassword = (values: any) => {
    console.log('修改密码:', values);
    message.success('密码已修改，请重新登录');
    form.resetFields(['oldPassword', 'newPassword', 'confirmPassword']);
  };
  
  const handleAvatarChange = (info: any) => {
    if (info.file.status === 'done') {
      message.success('头像上传成功');
    } else if (info.file.status === 'error') {
      message.error('头像上传失败');
    }
  };
  
  return (
    <Card title="用户资料" bordered={false}>
      <Tabs
        activeKey={activeTab}
        onChange={setActiveTab}
        items={[
          {
            key: 'profile',
            label: '个人资料',
            children: (
              <div style={{ display: 'flex', gap: 24 }}>
                <div style={{ flex: '0 0 200px', textAlign: 'center' }}>
                  <Avatar 
                    size={120} 
                    icon={<UserOutlined />} 
                    src={user?.avatar}
                    style={{ marginBottom: 16 }}
                  />
                  <Upload
                    showUploadList={false}
                    action="/api/upload" // 实际项目中需替换为真实上传接口
                    onChange={handleAvatarChange}
                  >
                    <Button icon={<UploadOutlined />}>更换头像</Button>
                  </Upload>
                  
                  <Divider />
                  
                  <Descriptions layout="vertical" column={1} size="small">
                    <Descriptions.Item label="用户角色">
                      <Tag color="blue">{user?.role || '管理员'}</Tag>
                    </Descriptions.Item>
                    <Descriptions.Item label="账户状态">
                      <Tag color="green">正常</Tag>
                    </Descriptions.Item>
                    <Descriptions.Item label="注册时间">
                      2023-01-01
                    </Descriptions.Item>
                    <Descriptions.Item label="最后登录">
                      2023-10-15 10:30:00
                    </Descriptions.Item>
                  </Descriptions>
                </div>
                
                <div style={{ flex: 1 }}>
                  <Form
                    form={form}
                    layout="vertical"
                    initialValues={{
                      username: user?.username || '测试用户',
                      email: user?.email || 'test@example.com',
                      realName: '张三',
                      department: '技术部',
                      position: '高级开发工程师',
                      bio: '热爱技术，专注于AI知识库开发的工程师。',
                    }}
                    onFinish={handleSaveProfile}
                  >
                    <Form.Item
                      name="username"
                      label="用户名"
                      rules={[{ required: true, message: '请输入用户名' }]}
                    >
                      <Input prefix={<UserOutlined />} />
                    </Form.Item>
                    
                    <Form.Item
                      name="email"
                      label="邮箱"
                      rules={[
                        { required: true, message: '请输入邮箱' },
                        { type: 'email', message: '请输入有效的邮箱地址' }
                      ]}
                    >
                      <Input prefix={<MailOutlined />} />
                    </Form.Item>
                    
                    <Form.Item name="realName" label="真实姓名">
                      <Input />
                    </Form.Item>
                    
                    <Form.Item name="department" label="部门">
                      <Input />
                    </Form.Item>
                    
                    <Form.Item name="position" label="职位">
                      <Input />
                    </Form.Item>
                    
                    <Form.Item name="bio" label="个人简介">
                      <Input.TextArea rows={4} />
                    </Form.Item>
                    
                    <Form.Item>
                      <Button type="primary" icon={<SaveOutlined />} htmlType="submit">
                        保存
                      </Button>
                    </Form.Item>
                  </Form>
                </div>
              </div>
            ),
          },
          {
            key: 'security',
            label: '安全设置',
            children: (
              <div style={{ maxWidth: 500 }}>
                <Title level={4}>密码修改</Title>
                <Form
                  layout="vertical"
                  onFinish={handleChangePassword}
                >
                  <Form.Item
                    name="oldPassword"
                    label="当前密码"
                    rules={[{ required: true, message: '请输入当前密码' }]}
                  >
                    <Input.Password prefix={<LockOutlined />} />
                  </Form.Item>
                  
                  <Form.Item
                    name="newPassword"
                    label="新密码"
                    rules={[
                      { required: true, message: '请输入新密码' },
                      { min: 8, message: '密码长度不能少于8个字符' }
                    ]}
                  >
                    <Input.Password prefix={<LockOutlined />} />
                  </Form.Item>
                  
                  <Form.Item
                    name="confirmPassword"
                    label="确认新密码"
                    dependencies={['newPassword']}
                    rules={[
                      { required: true, message: '请确认新密码' },
                      ({ getFieldValue }) => ({
                        validator(_, value) {
                          if (!value || getFieldValue('newPassword') === value) {
                            return Promise.resolve();
                          }
                          return Promise.reject(new Error('两次输入的密码不一致'));
                        },
                      }),
                    ]}
                  >
                    <Input.Password prefix={<LockOutlined />} />
                  </Form.Item>
                  
                  <Form.Item>
                    <Button type="primary" htmlType="submit">
                      修改密码
                    </Button>
                  </Form.Item>
                </Form>
                
                <Divider />
                
                <Title level={4}>其他安全设置</Title>
                <Space direction="vertical" style={{ width: '100%' }}>
                  <Paragraph>
                    <Tag color="blue">双因素认证</Tag> 未启用 
                    <Button type="link" size="small">设置</Button>
                  </Paragraph>
                  <Paragraph>
                    <Tag color="green">登录设备管理</Tag> 
                    <Button type="link" size="small">查看</Button>
                  </Paragraph>
                  <Paragraph>
                    <Tag color="orange">操作日志</Tag> 
                    <Button type="link" size="small">查看</Button>
                  </Paragraph>
                </Space>
              </div>
            ),
          },
          {
            key: 'preferences',
            label: '偏好设置',
            children: (
              <div>
                <Title level={4}>界面设置</Title>
                <p>界面偏好设置内容</p>
              </div>
            ),
          },
        ]}
      />
    </Card>
  );
};

export default UserProfile; 